<template>
  <div>

    <!-- 卡片区 -->
    <el-card>
        <el-row :gutter="20">
            <!-- 左侧树形菜单区 -->
            <el-col :span="4">
                <el-input
                  size="mini"
                  placeholder="输入关键字进行过滤"
                  v-model="filterText">
                </el-input>

                <el-tree
                  class="filter-tree"
                  :data="orgTreeData"
                  :props="defaultProps"
                  default-expand-all
                  :filter-node-method="filterNode"
                  @node-click="orgTreeClick"
                  ref="tree">
                </el-tree>
            </el-col>
            <el-col :span="20">
                <!-- 查询区 -->
                <el-row :gutter="20">
                		  <el-col :span="2">
                		    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                		  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:10px;">
                  <el-col :span="6">
                    <el-input size="mini" clearable v-model="queryInfo.username" placeholder="请输入要查询的用户名" @change="handleSearch">
                    </el-input>
                  </el-col>
                  <el-col :span="2">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
                  </el-col>
                </el-row>

                <!-- 表格区 -->
                <el-table size="mini" :data="this.page.tableData" border stripe class="user_table" :header-cell-style="{background:'#F2F6FC'}">
                  <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                  <el-table-column align="center" prop="username" label="用户名" width="180"></el-table-column>
                  <el-table-column align="center" prop="phone" label="电话"></el-table-column>
                  <el-table-column align="center" prop="email" label="邮箱"></el-table-column>
                  <el-table-column align="center" prop="status" label="是否启用">
                    <template v-slot="scope">
                      <el-tag size="mini" v-if="scope.row.status" type="success">启用</el-tag>
                      <el-tag size="mini" v-else type="danger">禁用</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template v-slot="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                      >修改</el-button>
                      <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        @click="handleDeleteUser(scope.row.id)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页区 -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="this.page.currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="this.page.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="this.page.total"
                ></el-pagination>
            </el-col>
        </el-row>
    </el-card>

    <!-- 新增/修改用户对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="userDialog"
      width="30%"
      :show-close="false"
      @close="userDialogClose"
    >
      <el-form size="mini" label-width="100px" :rules="userRules" :model="userForm" ref="userForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" :disabled="userForm.id !== undefined"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="userForm.id === undefined">
          <el-input type="password" v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="userForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="所属组织机构">
              <el-input placeholder="请选择组织机构" v-model="userForm.orgName"  @focus="orgTreeKey=true"></el-input>
              <div v-if="orgTreeKey">
                  <el-tree
                  :data="orgTreeData"
                  :props="defaultProps"
                  default-expand-all
                  @node-click="handleAddTreeSelected"
                  ></el-tree>
              </div>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
            <el-select size="mini" v-model="userForm.roleIds" value-key="id" style="width: 100%;" multiple placeholder="请选择角色">
                <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
                ></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="userDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleUserEditSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    const usernameCheck = async (rule, value, callback) => {
        console.log(this.userForm.id)
        if (this.userForm.id === undefined) {
            let res = await this.usernameCheck({ username: value });
            if (res.code !== 0) {
                callback(new Error("用户名已存在"));
            } else {
                callback();
            }
        } else {
            callback();
        }
    };
    return {
        title: '',
        orgs:[],
        roles: [],
        orgTreeData: [],
        userDialog: false,
        userForm: {
            status: true,
        },
        page:{
            tableData: [],
            pageSize: 10,
            total: 0,
            currentPage: 1,
        },
        queryInfo: {
            size: 0,
            current: 0,
            username: '',
            orgId: '',
        },
        orgTreeKey: false,
        defaultProps: {
            children: 'children',
            label: 'orgName'
        },
        elTreeProps:{// el-tree-select配置项（必选）
            value: 'id',
            label: 'orgName',
            children: 'children',
        },
        filterText: '',
        userRules: {
            username: [
              { required: true, message: "用户名不能为空", trigger: "blur" },
              { validator: usernameCheck, message: "用户名已存在", trigger: "blur" }
            ],
            password: [
              { required: true, message: "密码不能为空", trigger: "blur" },
              { min: 6, message: "密码至少为6位", trigger: "blur" }
            ],
            phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
            email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
            roleIds: [{ required: true, message: "角色不能为空", trigger: "blur" }],
        }
    };
  },
  async mounted() {
    // 查询机构树
    const orgs = await this.orgTree()
    this.orgTreeData = orgs.data

    // 查询用户列表
    this.flush()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    ...mapActions("user",[
      "userPage",
      "addUser",
      "updateUser",
      "deleteUser",
      "usernameCheck",
      "userRoleIds",
    ]),
    ...mapActions("role",[
        "roleList"
    ]),
    ...mapActions('org',['orgTree']),
    // 组织机构树过滤
    filterNode(value, data) {
        if (!value) return true;
        return data.orgName.indexOf(value) !== -1;
    },
    // 点击组织机构树的节点
    orgTreeClick(data, node, obj){
        this.queryPage(data.id, this.queryInfo.username, this.page.pageSize, this.page.currentPage)
    },
    // 新增按钮
    async handleAdd(){
        this.title = '新增用户'
        this.userDialog = true
        // 查询用户角色列表
        const roles = await this.roleList()
        this.roles = roles.data
    },
    // 修改每页显示条数
    handleSizeChange(size) {
        this.queryPage(this.queryInfo.orgId, this.queryInfo.username, size, this.page.currentPage)
    },
	// 修改当前第几页
    handleCurrentChange(current) {
        this.queryPage(this.queryInfo.orgId, this.queryInfo.username, this.page.pageSize, current)
    },

    // 修改按钮
    async handleEdit(row) {
        this.title = '修改用户'

        // 查询用户角色列表
        const roles = await this.roleList()
        this.roles = roles.data

        // 查询用户角色id集合
        const roleIds = await this.userRoleIds(row.id);
        this.userForm.roleIds = roleIds.data

        this.getOrg(this.orgTreeData)
        // 回显组织机构
        for(let org of this.orgs) {
            if (org.orgId === row.orgId) {
                this.userForm.orgName = org.orgName
            }
        }
        this.userForm = Object.assign({}, this.userForm, row)

        this.userDialog = true;
    },
    getOrg(datas){ //递归遍历机构树，获取组织机构list
      for(var i in datas){
        this.orgs.push({orgId: datas[i].id, orgName: datas[i].orgName})
        if(datas[i].children){
          this.getOrg(datas[i].children);
        }
      }
    },

    // 用户新增dialog关闭后清空值和校验
    userDialogClose() {
      this.$refs["userForm"].resetFields();
      this.userForm = {
        status: true,
      }
      this.orgTreeKey = false
    },

    // 提交表单
    async handleUserEditSubmit() {
        this.$refs.userForm.validate(async valid => {
            if (!valid) {
                return false;
            } else {
                if (this.userForm.id === undefined) {
                    let res = await this.addUser(this.userForm);
                    if (res.code === 0) {
                        this.$message.success("添加用户成功");
                    }
                    //刷新
                    this.flush();
                    //关闭dialog
                    this.userDialog = false;
                } else {
                    let res = await this.updateUser(this.userForm);
                    if (res.code == 0) {
                        this.$message.success("修改用户成功");
                    }
                    // 刷新
                    this.flush();
                    // 关闭dialog
                    this.userDialog = false;
                }
            }
        })
    },

    // 删除用户
    handleDeleteUser(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          console.log(`id是：${id}`);
          let res = await this.deleteUser(id);
          if (res.code == 0) {
            this.$message.success("删除用户成功");
          }
          //刷新
          this.flush();
        })
        .catch(() => {});
    },
    handleAddTreeSelected(data){
      this.userForm.orgId = data.id
      this.userForm.orgName = data.orgName
      this.orgTreeKey = false
    },

	//条件查询
    handleSearch() {
      this.queryPage('',this.queryInfo.username,this.page.pageSize,'')
    },

    //---------- 工具方法 -----------
	//封装分页参数
	copyPageValue(res){
		this.page.tableData = res.data.records;
		this.page.total = res.data.total;
		this.page.pageSize = res.data.size;
		this.page.currentPage = res.data.current;
	},
	//封装查询参数
	copyQueryValue(orgId,username,size,current){
		return {
			username: username?username:null,
            orgId: orgId?orgId:null,
			size: size?size:null,
			current: current?current:null,
		}
	},
    //封装分页请求通用方法
    async queryPage(orgId,username,size,current){
        let res = await this.userPage(this.copyQueryValue(orgId,username,size,current));
        this.copyPageValue(res)
    },
    //刷新界面
    flush() {
      this.queryPage('','',this.page.pageSize,'')
    },
  }
};
</script>
<style lang="less" scoped>
.user_table {
  width: 100%;
  margin-top: 10px;
}

.el-pagination {
  margin-top: 10px;
}

.el-switch {
  margin-top: 4px;
}
</style>
